<template>
  <BoTable
    :columns="columns"
    :request="getAlarmTypeList"
    ref="tableRef"
    :row-selection="rowSelection"
    row-key="id"
  >
    <template #toolbars>
      <Space :size="8">
        <Button type="primary" @click="onAdd"> 新增 </Button>
      </Space>
    </template>
  </BoTable>
  <FormModal :columns="item"> </FormModal>
</template>
<route lang="json">
{
  "name": "alarm-types",
  "meta": {
    "title": "告警类型管理"
  }
}
</route>
<script setup lang="tsx">
import { computed, onMounted, ref } from 'vue';
import { useFormModal } from '@boeyo/hooks';
import { useDicts } from '@boeyo/portal';
import { listToOption } from '@boeyo/shared';
import { BoFormProps, BoTable, BoTableProps } from '@boeyo/ui';
import { Button, Space, message } from 'ant-design-vue';
import { addAlarmType, getAlarmTypeList, updateAlarmType } from './api';

const tableRef = ref();
const selectKeys = ref<any[]>([]);
const rowSelection = computed<BoTableProps['rowSelection']>(() => {
  return {
    selectedRowKeys: selectKeys.value,
    onChange(values, all) {
      selectKeys.value = values;
    },
  };
});

let dictArr = ['alarm_type', 'use_status'];
const { alarmTypeEnum, alarmTypeOptions, useStatusEnum, useStatusOptions } =
  useDicts(dictArr);

const columns = computed<BoTableProps['columns']>(() => [
  {
    title: '序号',
    dataIndex: 'index',
    customRender({ renderIndex, index }) {
      return renderIndex + 1;
    },
    hideInSearch: true,
  },
  {
    title: '告警类型',
    dataIndex: 'alarmType',
    hideInSearch: true,
    valueType: 'status',
    valueEnum: alarmTypeEnum.value,
  },
  {
    title: '状态',
    dataIndex: 'status',
    valueType: 'status',
    valueEnum: useStatusEnum.value,
    hideInSearch: true,
  },
  {
    title: '备注',
    dataIndex: 'remark',
    hideInSearch: true,
  },

  {
    title: '操作',
    dataIndex: 'operation',
    hideInSearch: true,
    actions: [
      {
        text: '详情',
        onClick(record) {
          onView(record);
        },
      },
    ],
  },
]);

const item = computed<BoFormProps['columns']>(() => [
  {
    title: '告警类型',
    dataIndex: 'alarmType',
    valueType: 'select',
    formItemProps: {
      rules: [
        {
          required: true,
          message: '请选择告警类型',
          trigger: 'blur',
        },
      ],
    },
    fieldProps: {
      placeholder: '请选择告警类型',
      // options: listToOption(alarmTypeOptions.value),
      options: alarmTypeOptions.value as any,
    },
  },
  {
    title: '状态',
    dataIndex: 'status',
    valueType: 'radio',
    formItemProps: {
      rules: [
        {
          required: true,
          message: '请选择状态',
          trigger: 'blur',
        },
      ],
    },
    fieldProps: {
      placeholder: '请选择状态',
      // options: listToOption(useStatusOptions.value),
      options: useStatusOptions.value as any,
    },
  },
  {
    title: '备注',
    dataIndex: 'remark',
    valueType: 'textarea',
    fieldProps: {
      placeholder: '请输入备注',
      rows: 2,
      maxLength: 100,
      showCount: true,
    },
  },
]);

const { FormModal, open } = useFormModal({
  size: 'small',
  column: 1,
});

const onView = (record: any) => {
  console.log(record, 'record');

  open({
    title: (type) => (type === 'info' ? '处理' : '编辑'),
    request: async (params: any) => {
      await updateAlarmType(params);
      tableRef.value.refresh();
    },
    defaultValue: {
      ...record,
    },
  });
};
const onAdd = () => {
  open({
    title: '新增',
    request: async (params: any) => {
      await addAlarmType(params);
      tableRef.value.refresh();
    },
    defaultValue: {
      status: '1',
    },
  });
};
</script>

<style lang="scss" scoped></style>
